<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表情替换</title>
</head>
<body>

</body>

<script>
  const emoJSON = [
    {
      index: 0,
      type: "local",
      pathLabel: "@/assets/images/emotionLocal/face00/f_static_hehe.png",
      selected: true,
      nodes: [
        {
          url: "@/assets/images/emotionLocal/face00/f_static_hehe.png",
          name: "{微笑}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_aini.png",
          name: "{爱你}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_baibai.png",
          name: "{拜拜}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_beishang.png",
          name: "{悲伤}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_bishi.png",
          name: "{鄙视}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_bizui.png",
          name: "{闭嘴}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_chanzui.png",
          name: "{馋嘴}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_chijing.png",
          name: "{吃惊}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_dalian.png",
          name: "{打脸}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_ding.png",
          name: "{敲打}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_ganmao.png",
          name: "{感冒}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_guzhang.png",
          name: "{鼓掌}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_haha.png",
          name: "{哈哈}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_haixiu.png",
          name: "{害羞}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_han.png",
          name: "{流汗}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_heiheihei.png",
          name: "{嘿嘿}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_heixian.png",
          name: "{黑线}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_heng.png",
          name: "{怨恨}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_huaixiao.png",
          name: "{坏笑}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_huaxin.png",
          name: "{花心}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_jiyan.png",
          name: "{调皮}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_keai.png",
          name: "{可爱}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_kelian.png",
          name: "{可怜}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_ku.png",
          name: "{装酷}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_kun.png",
          name: "{瞌睡}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_lei.png",
          name: "{流泪}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_nu.png",
          name: "{发怒}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_qinqin.png",
          name: "{亲亲}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_shayan.png",
          name: "{傻眼}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_shengbing.png",
          name: "{生病}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_shuai.png",
          name: "{衰衰}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_kulou.png",
          name: "{骷髅}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_shuijiao.png",
          name: "{睡觉}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_xixi.png",
          name: "{龇牙}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_taikaixin.png",
          name: "{开心}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_tian.png",
          name: "{跪舔}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_touxiao.png",
          name: "{偷笑}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_wabishi.png",
          name: "{挖鼻}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_weiqu.png",
          name: "{委屈}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_wu.png",
          name: "{捂眼}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_xiaoku.png",
          name: "{笑哭}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_xingxingyan.png",
          name: "{惊喜}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_xu.png",
          name: "{嘘嘘}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_yinxian.png",
          name: "{阴险}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_yiwen.png",
          name: "{疑问}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_youhengheng.png",
          name: "{右哼}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_zuohengheng.png",
          name: "{左哼}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_yun.png",
          name: "{头晕}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_yunbei.png",
          name: "{运背}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_zhuakuang.png",
          name: "{抓狂}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_feizao.png",
          name: "{肥皂}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_doge.png",
          name: "{狗狗}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_erha.png",
          name: "{二哈}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_miao.png",
          name: "{猫猫}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_shenshou.png",
          name: "{神兽}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_tuzi.png",
          name: "{兔子}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_xiongmao.png",
          name: "{熊猫}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_zhutou.png",
          name: "{猪头}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_xiaoji.png",
          name: "{小鸡}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_jizhi.png",
          name: "{机智}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_cold.png",
          name: "{好冷}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_keep_fighting.png",
          name: "{奋斗}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_no_prob.png",
          name: "{OK}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_social.png",
          name: "{抱拳}"
        },
        {
          url: "@/assets/images/emotionLocal/face00/f_static_watermelon.png",
          name: "{吃瓜}"
        }
      ]
    }
  ];

 const emojReplace = string => {
    // 正则匹配表情, 即使将文字{微笑} 这样的替换成微笑图片
    // 获取标签图片
    string.replace(/{([^}]+)}/g, function(match) {
      let url = ''
      for (let i = 0; i < emoJSON[0].nodes.length; i++) {
        const element = emoJSON[0].nodes[i]
        if (element.name == match) {
          url = element.url
        }
      }
      let outHtml = ''
      // 判断是否为大表情
      // console.log(url, match, capture)
      outHtml = '<img src="' + url + '" class="face" />'
      string = string.replace(match, outHtml)
    })

    return string
  }

  console.log(emojReplace("{小鸡}{猪头}{兔子}{猪头}{抓狂}{右哼}"))
</script>
</html>
